<template>
  <Modal
    v-model="showModal"
    title="实时报警信息"
    width="1200"
    class="main-form-modal main-search"
    :mask-closable="false"
    footer-hide
    @on-cancel="cancelModal('modalForm')">
    <!-- 搜索 -->
    <Form ref="searchForm" :model="searchParams" :label-width="80" class="main-search-form" @keydown.enter.native.prevent="search()">
      <Row :gutter="20">
        <Col :xs="24" :sm="12" :md="12" :lg="8" class="view-col" :key="1">
          <FormItem label="报警类型：" prop="warnType">
            <Select v-model="searchParams.warnType" placeholder="请选择报警类型">
              <Option v-for="item in warnTypes" :value="item.dicValue" :key="item.dicValue">{{ item.dicKey }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="12" :md="12" :lg="8" class="view-col" :key="2">
          <FormItem class="main-search-btn-group">
            <Button type="primary" @click="search()">查询</Button>
            <Button @click="reset('searchForm')">重置</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 数据表格 -->
    <div class="main-table-data" style="padding-bottom: 0px;">
      <Table :columns="warnRealtimeCol" :data="warnRealtimeData" :loading="dataLoad" class="main-table"></Table>
      <Page
        :current.sync="searchParams.currentPage"
        :page-size="searchParams.pageSize"
        :total="searchParams.total"
        show-elevator
        show-total
        show-sizer
        :page-size-opts="[10, 20, 50, 100, 200]"
        class="main-page"
        @on-page-size-change="pageSizeChange($event)"
        @on-change="search($event)">
      </Page>
    </div>
  </Modal>
</template>

<script>
import { resourceTypeSelect } from '@/api/warn-config/db-resource'
import LinkBtn from '_c/link-btn'
export default {
  name: 'WarnRealtimeModal',
  components: {
    LinkBtn
  },
  props: {
    toggle: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default () {
        return {
          status: 'add',
          row: {}
        }
      }
    }
  },
  data () {
    return {
      showModal: false,
      dataLoad: false,
      warnTypes: [],
      searchParams: {
        warnType: '',
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      warnRealtimeCol: [
        { title: '报警类型', key: 'dsName' },
        { title: '终端名称', key: 'dsName' },
        { title: '参数名称', key: 'dsName' },
        { title: '门阀值', key: 'dsName' },
        { title: '报警值', key: 'dsName' },
        { title: '报警时间', key: 'dsName' },
        { title: '上次报警值', key: 'dsName' },
        { title: '上次报警时间', key: 'dsName' },
        { title: '操作',
          render: (h, { row }) => {
            return h('div', [
              h(LinkBtn, { props: { type: 'success' }, on: { click: () => { this.editResource(row) } } }, '未确认'),
              h('span', { style: { margin: '0px 6px' } }, '|'),
              h(LinkBtn, { props: { type: 'error' }, on: { click: () => { this.deleteResource(row) } } }, '设置')
            ])
          }
        }
      ],
      warnRealtimeData: [
        { dsName: 'demo' }
      ],
      originData: {}
    }
  },
  watch: {
    toggle (newVal) {
      this.showModal = newVal
      if (newVal) {
        console.log(1)
        this.getWarnType()
      }
    }
  },
  methods: {
    // 分页尺寸改变
    pageSizeChange (val) {
      // console.log(val, this.searchParams.pageSize)
      this.searchParams.pageSize = val
      this.search()
    },
    // 搜索
    search (val) {
      // console.log(this.searchParams.pageSize)
      this.searchParams.currentPage = val || 1
      this.getDbResource(this.searchParams)
    },
    // 重置
    reset (formRef) {
      this.$refs[formRef].resetFields()
    },
    // 取消
    cancelModal (formRef) {
      this.$emit('update:toggle', false)
    },
    // 获取报警类型
    async getWarnType () {
      let params = {
        gType: 'warning_mode'
      }
      await resourceTypeSelect(params).then(res => {
        if (res.data.error !== 0) {
          this.$Message.error(res.data.info)
        } else {
          this.warnTypes = [].concat(res.data.data.db)
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    // 获取报警数据
    getWarnRealtimeData () {
      // let params = {
      //   gType: 'warning_mode'
      // }
      // this.dataLoad = true
      // await resourceTypeSelect(params).then(res => {
      //   if (res.data.error !== 0) {
      //     this.$Message.error(res.data.info)
      //   } else {
      //     this.warnTypes = [].concat(res.data.data.db)
      //   }
      // }).catch(err => {
      //   console.log('err', err)
      // })
      // this.dataLoad = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/style/main-panel.styl'
</style>
